<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form :model="searchParams" inline class="search-form-inline" label-width="70px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品类型" >
                <el-select
                  filterable
                  clearable
                  v-model="searchParams.productType"
                  placeholder="产品类型"
                >
                  <el-option
                    v-for="item in productTypes"
                    :label="item.bizName"
                    :value="item.bizValue"
                    :key="item.bizValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="仓库">
                <Warehouse-search width='200px' v-model="searchParams.warehouseCode"/>
            </el-form-item>
          </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称">
                <el-input
                  clearable
                  v-model="searchParams.productName"
                  placeholder="产品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="产品型号" >
                <el-input
                clearable
                  v-model="searchParams.productModel"
                  placeholder="产品型号"
                ></el-input>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
         <Table-header-out @click="createDialog"/>
      <page-table
        ref="product_entry"
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          fixed
          min-width ="120"
          label="产品名称"
          prop="productName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="产品编码" prop="productCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="产品类型" prop="productType" show-overflow-tooltip :formatter="formatterProductType"></el-table-column>
        <el-table-column label="产品型号" prop="productModel" show-overflow-tooltip></el-table-column>
        <el-table-column label="产品单位" prop="unit" align="center"></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属仓库"  prop="warehouseName" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="出库价格（元）"
          prop="price"
          :sortable="'custom'"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column label="出库数量" prop="productNum" align="center"></el-table-column>
        <el-table-column
          min-width ="100"
          label="出库时间"
          prop="stockDate"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.stockDate | FormatDate('yyyy-MM-dd')}}
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="operatorName"></el-table-column>
      </page-table>
    </div>
    <Product-out-panel v-if="visibleOutPanel"  :visible.sync="visibleOutPanel" @afterSave="refreshList"   ref="productEntryPanel"  :operationSubTypes="operationSubTypes"/>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import DatePicker from '@/components/DatePicker'
import TableHeaderOut from './components/TableHeaderOut'
import ProductOutPanel from '@/views/eims/components/productOutPanel'
import WarehouseSearch from '@/views/eims/components/WarehouseSeach'
import Mixins from './mixins'

export default {
  components: {SearchBar, DatePicker, PageTable, TableHeaderOut, ProductOutPanel, WarehouseSearch},
  mixins: [Mixins],
  data () {
    return {
      id: 'product_out',
      visibleOutPanel: false,
      operationSubTypes: [{value: 23, label: '人工出库'}]
    }
  },
  methods: {
    createDialog () {
      this.visibleOutPanel = true
    },
    refreshList () {
      this.initPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
